<template>
  <div class="pages">
    <div class="title_1">体测通知 </div>
    <!--eslint-disable-next-line-->
    <div v-if="datalist.length != 0">
      <div v-for="(data,index,key) in datalist" class="box" @click="rout(data)">
        <div class="w_image">
          <img  class="image" v-if="index==1 || index==4 || index==8" src="../../image/Ellipse23.png" />
          <img  class="image" v-else-if="index==2 || index==5 || index==7" src="../../image/Ellipse24.png" />
          <img  class="image" v-else src="../../image/Ellipse25.png" />

        </div>
        <div class="text">
          <div class="text_1">{{ data.title }} </div>
          <div class="box1">
            <img class="image_1" src="../../image/star.png" />
            <text class="text_2">{{ data.time }}</text>
<!--            <text class="text_2">{{ data.message.slice(data.message.indexOf("<p>")+30,data.message.indexOf("</p>")) }}</text>-->
          </div>
<!--          <div class="time"> {{ data.time }} </div>-->
        </div>
        <div class="a_image">
          <img   class="image_2" src="../../image/unread.png" />
<!--          <img v-if="data.image2 === '5'" class="image_2" src="../../image/read.png" />-->
        </div>
      </div>
    </div>

    <div v-if="datalist.length === 0" class="empty-image-box">
      <img class="empty-image" src="../../image/empty-notice2.png" />
      <div class="empty-text">
        <div style="margin-top: -15px;">暂无发布的通知</div>
      </div>
    </div>
    <!--   弹出框-->
    <van-popup round v-model:show="show">
      <div class="box2" >
        <div class="top">
          <text class="text_3">{{ noticeData.title }}</text>
          <img @click="noshow()" class="image_3" src="../../image/XX.png" />
        </div>
        <p style="margin: auto 15px;" class="text3">  <span v-html="message"></span></p>
<!--        <div class="datatime">-->
<!--          <img class="image_4" src="../../image/datatime.png" />-->
<!--          <text class="text_4">2022年11月5号</text>-->
<!--        </div>-->
<!--        <div class="box3">-->
<!--          <div class="t_image">-->
<!--            <img class="image_5" src="../../image/peo.png" />-->
<!--          </div>-->
<!--          <div class="t_text"> 根据国家教育部2022年国家学生体质健康数据上报工作部署及安排，遵照省教育厅体卫艺处工作指示。 </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;滑动文本框&ndash;&gt;-->
<!--        <textarea class="texta">-->
<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本学期测试项目共有7项：内场5项分别为身高体重、立定跳远、肺活量、坐位体前屈、仰卧起坐（女）/引体向上（男）；外场2项分别为50米、800米（女）/1000米（男）。视力今年春季暂不进行现场测试。参测学生需穿着运动服、运动鞋参测。-->

<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本年度体质测试将严格执行体测考场纪律, 所有参测本科生必须携带校园一卡通（必带）、身份证或学生证（二选一）至少两证(且头像清晰)到场测试，否则将拒绝参测；如发现有舞弊行为，将取消该生本年度体测资格，记为0分，并通报学院。-->

<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他具体事宜见附件，请各位参测本科生仔细阅读并执行。-->
<!--        </textarea>-->
        <div class="box4"> <text class="text_5">体育学院体测中心</text><text class="text_6">{{ noticeData.time }}</text> </div>
        <div class="sbutton">
          <van-button type="primary" size="small" @click="statu()">确认查看</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  // eslint-disable-next-line vue/no-export-in-script-setup
  import {
     getNoticeInfo
  } from "../../api/notice";
  import { Notify } from 'vant';
  import 'vant/es/notify/style';

  export default {
    data() {
      return {
        datalist: [
          {
            image1: '1',
            title: '体测不及格补测通知',
            message: '各位同学我们将于2022年11月15日...',
            time: '2022/11/05',
            image2: '4',
          }

        ],
        a: 1,
        show: false,
        message: '',
        noticeData: null
      };
    },
    methods: {
      rout(key) {
        this.show = true;
        console.log(key);
        this.noticeData = key
        // this.message = '<p>key.message</p>'
        this.message = key.message
      },
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      statu() {
        //  修改阅读状态
        this.show = false;
      },
      noshow() {
        this.show = false;
      },
      async reLoadNotice(){
        this.datalist = []
        let data = null;
        console.log('sdjf90quweh8r90tu234n0r9wne0')
        if(localStorage.getItem('noticeDate')){
          const nowTime = (new Date()).getTime();
          const oldTime = localStorage.getItem('noticeDate')
          console.log('nowTime - oldTime',nowTime - oldTime)
          if(nowTime - oldTime < 1000*10){
            data = JSON.parse(localStorage.getItem('noticeData'))
            this.datalist = data
            return
          }
        }
        localStorage.setItem('noticeDate',(new Date()).getTime())
        const res = await getNoticeInfo("201912480");
        data = res.response._rawValue
        console.log('resnotice:',data)
        if( 200 != data.code ){
          // this.datalist = []
          // Toast.fail("加载通知失败")
          Notify({ type: 'danger', background: '#ee0a24', message: '加载通知失败' });
          return
        }
        console.log("加载通知成功")
        if(undefined == data.extend.records){
          console.log("但是数据为空")
          localStorage.setItem('noticeData',JSON.stringify([]))
        }else {
          this.datalist = data.extend.records
          localStorage.setItem('noticeData',JSON.stringify(data.extend.records))
          console.log(data.extend.records)
        }

        // this.datalist = res.response._rawValue.extend.records
      },
    },
    created(){
      console.log('sdjf90quweh8r90tu234n0r9wne0')
      this.throttle = ((func, wait)=>{
        var timeout = null;
        var previous = 0;
        return function() {
          let context = this;
          let args = arguments;
          if (!timeout) {
            func.apply(context, args)
            timeout = setTimeout(function(){
              timeout = null;
            }, wait)
          }else {
            Notify({ type: 'danger',background: '#ee0a24', message: '请勿频繁请求' });
            // Toast.fail("请勿频繁请求")
          }
        }
      })(this.reLoadNotice,10000);

      this.throttle();
      // this.reLoadNotice()
    }
  };
</script>

<style lang="scss" scoped>
.empty-image-box{
  padding-top: 10vh;
  width: 100%;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.empty-image{
  width: 50%;
}
.empty-text{
  /*font-weight: normal;*/
  font-weight: inherit;
  font-size: inherit;
  font-family: "微软雅黑 Light";
  margin-top: 20px;
}
  .pages {
    display: flex;
    flex-wrap: wrap;
  }
  .title_1 {
    display: flex;
    margin-left: 3vw;
    margin-bottom: 20px;
    width: 100%;
    font-family: Roboto-Bold;
    font-size: 38px;
    font-weight: bold;
    color: #262626;
  }
  .box {
    display: flex;
    margin-top: 30px;
    margin-bottom: 40px;
    margin-left: 3vw;
  }
  .image {
    display: flex;
    padding-right: 10px;
    width: 94px;
    height: 94px;
  }
  .image_1 {
    //margin-top: 15px;
    margin-right: 5px;
    width: 17.61px;
    height: 12.24px;
  }
  .image_2 {
    display: flex;
    margin-top: 30px;
    margin-left: 7vw;
    width: 40px;
    height: 37px;
  }
  .image_3 {
    //position: relative;
    //left: 5vw;
    position: absolute;
    right: 10px;
    //top: 20px;
    float: right;
    padding: 20px;
    width: 23.06px;
    height: 23.71px;
  }
  .image_4 {
    padding: 20px;
    width: 36.67px;
    height: 36.67px;
  }
  .image_5 {
    display: flex;
    margin-left: 5vw;
    margin-top: 20px;
    width: 251px;
    height: 157px;
  }
  .w_image {
    display: flex;
    //width: 20%;
  }
  .text {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 70%;
  }
  .text_1 {
    display: flex;
    width: 100%;
    font-family: Roboto-Bold;
    font-size: 33px;
    font-weight: bold;
    margin-top: 15px;
    line-height: 25px;
    letter-spacing: 0px;
    color: #262626;
  }
  .text_2 {
    width: 55vw;
    overflow: hidden; /*隐藏*/
    white-space: nowrap; /*不换行*/
    text-overflow: ellipsis; /* 超出部分省略号 */
    font-family: Roboto-Bold;
    font-size: 22px;
    font-weight: bold;
    color: rgba(38, 38, 38, 0.71);
  }
  .box1 {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }
  .box3 {
    display: flex;
  }
  .box4 {
    display: flex;
    margin-left: 55vw;
    margin-top: 30px;
    font-family: Inter-Regular;
    font-size: 28px;
    font-weight: normal;
    color: #3d3d3d;
    flex-wrap: wrap;
  }
  .time {
    display: flex;
    width: 100%;
    font-family: Roboto-Bold;
    font-size: 21px;
    font-weight: bold;
    color: #3e3e3e;
  }
  .a_image {
    float: right;
    width: 20%;
    //display: flex;
  }
  .box2 {
    max-height: 1300px;
    min-height: 400px;
    width: 90vw;
  }
  .top {
    margin-top: 20px;
    height: 80px;
    text-align: center;
  }
  .text_3 {
    font-family: Roboto-Bold;
    font-size: 38px;
    font-weight: bold;
    color: #262626;
  }
  .text_4 {
    font-family: Inter-Regular;
    font-size: 24px;
    font-weight: normal;
    color: #3e3e3e;
    margin-top: 20px;
  }
  .text_5 {
    width: 100%;
    display: flex;
  }
  .text_6 {
    width: 100%;
    display: flex;
    margin-left: 5vw;
  }
  .datatime {
    width: 80vw;
    height: 78px;
    display: flex;
    margin-left: 5vw;
    margin-top: 60px;
    border-radius: 4px;
    align-content: center;
    text-align: center;
    background: rgba(40, 73, 157, 0.09);
  }
  .t_image {
    display: flex;
    width: 46%;
  }
  .t_text {
    margin-top: 20px;
    display: flex;
    width: 54%;
    font-family: Inter-Regular;
    font-size: 29px;
    font-weight: normal;
    color: #3d3d3d;
  }
  .texta {
    display: flex;
    margin-left: 5vw;
    width: 80vw;
    height: 700px;
    font-family: Inter-Regular;
    font-size: 29px;
    font-weight: normal;
    color: #3d3d3d;
    border: none;
  }
  .van-button--primary{
    --van-font-size-lg: 50px;
    --van-button-default-font-size: 18x;

  }
  .sbutton {
    display: flex;
    margin-top: 30px;
    margin-left: 30vw;
    padding-bottom: 40px;
    height: 40px;
    width: 25vw;
    align-content: center;
    justify-content: center;
  }

  .text3>>>img{

    width: 100%;
  }
.text3{
  ::v-deep img { width: 100%; }
  ::v-deep .image{
    margin: 10px;
  }
}
</style>
